<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人信息</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
</head>

<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <form class="layui-form model-form">
        <input name="userId" type="hidden" value="${loginUser.userId}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">所属角色</label>
            <div class="layui-input-block">
                <% for(role in loginUser.roles) { %>
                <a href="javascript:;" class="layui-btn layui-btn-primary">${role.roleName}</a>
                <% } %>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入账号" type="text" class="layui-input" maxlength="20" value="${loginUser.username}"
                       lay-verType="tips" lay-verify="required" readonly required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input name="nickName" placeholder="请输入昵称" type="text" class="layui-input" maxlength="20" value="${loginUser.nickName}"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" ${loginUser.sex=='1'?'checked':''}/>
                <input type="radio" name="sex" value="女" title="女" ${loginUser.sex=='2'?'checked':''}/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="请输入手机号码" type="text" class="layui-input" maxlength="12" value="${loginUser.phone}"
                       lay-verType="tips" lay-verify="required|phone|number" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input name="email" placeholder="请输入邮箱" type="text" class="layui-input" maxlength="30" value="${loginUser.email}"
                       lay-verType="tips" lay-verify="required|email" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-upload">
                <input type="hidden" id="avatar" name="avatar" value="${loginUser.avatar}" lay-verType="avatar">
                <button type="button" class="layui-btn" id="avatar-upload-normal">
                    <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
                </button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" style="margin-left: 110px" id="avatar-upload-normal-img" src="${loginUser.avatar}">
                    <p id="avatar-upload-demoText"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="userSubmit" lay-submit>确认修改</button>
            </div>
        </div>
    </form>
</div>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'admin', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var upload = layui.upload;

        form.verify({
            avatar: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value.trim() == ""){
                    return '请上传头像';
                }
            }
        });

        // 表单提交事件
        form.on('submit(userSubmit)', function (data) {
            layer.load(2);
            var url = '/system/user/updateInfo';
            $.post(url, data.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    top.layui.admin.closeThisTabs();
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json');
            return false;
        });

        var uploadInst = upload.render({
            elem: '#avatar-upload-normal',
            url: uploadImgUrl(),
            accept: 'images',
            acceptMime: 'image/*',
            size: 600,
            choose: function (obj) {
            },
            done: function (res, index, upload) {
                if (res.code!=1){
                    layer.msg(res.msg, {icon: 2});
                } else{
                    layer.msg(res.msg, {icon: 1});
                    var imgurl = res.data.length>0?(imgFileDomain()+res.data[0]):"";
                    $('#avatar-upload-normal-img').attr('src', imgurl);
                    $('#avatar').val(imgurl);
                }
            },
            error: function () {
                layer.msg('上传失败', {icon: 2});
            }
        });


    });
</script>


</body>
</html>